<template>
	<view class="create-team-container">
		<view class="form-header">
			<text class="form-title">创建球队</text>
		</view>

		<view class="form-content">
			<!-- 队徽上传 -->
			<view class="upload-section">
				<view class="upload-box" @tap="chooseImage">
					<image v-if="formData.emblemUrl" :src="config.baseUrl + formData.emblemUrl" mode="aspectFit" class="team-logo" />
					<view v-else class="upload-placeholder">
						<text class="iconfont icon-camera"></text>
						<text class="upload-text">上传队徽</text>
					</view>
				</view>
			</view>

			<!-- 表单项 -->
			<view class="form-item">
				<text class="label">队徽</text>
				<view class="input-box">
					<text class="name">{{ formData.emblemUrl ? "已上传" : "请上传队徽" }}</text>
					<text class="arrow">›</text>
				</view>
			</view>

			<view class="form-item">
				<text class="label">名字</text>
				<input class="input" type="text" v-model="formData.teamName" placeholder="请输入球队名称" />
			</view>

			<view class="form-item">
				<text class="label">地区</text>
				<input class="input" type="text" v-model="formData.region" placeholder="请输入地区" />
			</view>
		</view>

		<button class="submit-btn" @tap="confirmCreate">确定创建</button>
	</view>
</template>

<script>
import config from "@/config.js";
import { upload } from "@/api/system/upload.js";
import { createTeams } from "@/api/system/qiu.js";

export default {
	data() {
		return {
			config,
			formData: {
				teamName: "",
				emblemUrl: "",
				region: ""
			}
		};
	},
	methods: {
		// 选择图片
		async chooseImage() {
			upload((res) => {
				console.log(res);
				this.formData.emblemUrl = res.fileName;
			});
		},

		// 确认创建
		confirmCreate() {
			if (!this.formData.teamName.trim()) {
				return uni.showToast({
					title: "请输入球队名称",
					icon: "none"
				});
			}
			if (!this.formData.emblemUrl) {
				return uni.showToast({
					title: "请上传队徽",
					icon: "none"
				});
			}
			if (!this.formData.region.trim()) {
				return uni.showToast({
					title: "请输入地区",
					icon: "none"
				});
			}

			// TODO: 调用创建球队API
			console.log("创建球队:", this.formData);
			createTeams(this.formData).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: "创建成功",
						icon: "success",
						duration: 2000,
						success: () => {
							setTimeout(() => {
								uni.navigateBack();
							}, 2000);
						}
					});
				}
			});
		}
	}
};
</script>

<style>
.create-team-container {
	min-height: 100vh;
	background-color: #f5f6fa;
	padding: 30rpx;
}

.form-header {
	margin-bottom: 40rpx;
}

.form-title {
	font-size: 44rpx;
	font-weight: bold;
	color: #333;
}

.upload-section {
	display: flex;
	justify-content: center;
	margin-bottom: 40rpx;
}

.upload-box {
	width: 200rpx;
	height: 200rpx;
	background: #fff;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.team-logo {
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
}

.upload-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #999;
}

.icon-camera {
	font-size: 48rpx;
	margin-bottom: 10rpx;
}

.upload-text {
	font-size: 24rpx;
}

.form-item {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
}

.label {
	width: 140rpx;
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
}

.input {
	flex: 1;
	font-size: 32rpx;
}

.input-box {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.name {
	font-size: 32rpx;
	color: #666;
}

.arrow {
	font-size: 36rpx;
	color: #999;
}

.submit-btn {
	margin-top: 60rpx;
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	background: linear-gradient(135deg, #1e3c72, #2a5298);
	color: #fff;
	font-size: 32rpx;
	border-radius: 45rpx;
	font-weight: 500;
	box-shadow: 0 4rpx 12rpx rgba(42, 82, 152, 0.3);
}
</style>
